<?php use_helper('GMap') ?>
<ol id="sections">
    <li class="section">
        <div class="dp-content">
            <div id="doctor-search-filters">
                <div id="search-doctors">
                    <?php include_partial("search", array("form" => $form)) ?>
                </div>
                <div id="doctors-search-google-map">
                    <?php include_partial("doctor_location/google_map") ?>
                </div>
                <?php include_partial("doctor_location/google_map_info_window") ?>
            </div>
        </div>
    </li>
    <li class="section" id="two">
        <div class="dp-content">
            <div id="week-slider-controls">
                <div class="inline-block" id="doctors-prev-week-block">
                    <button class="button week-action" type="submit" id="prev-week">Prev Week</button>
                </div>
                <div class="inline-block" id="doctors-this-week-block">
                    <button class="button week-action" type="submit" id="this-week">This Week</button>
                </div>
                <div class="inline-block" id="doctors-next-week-block">
                    <button class="button week-action" type="submit" id="next-week">Next Week</button>
                </div>
            </div>
            <div id="doctor-search-results">
                <div id="doctors">
                    <?php $d = 0 ?>
                    <?php foreach ($doctors as $doctor): ?>
                        <?php $d++ ?>
                        <div class="doctor">
                            <div class="mini-profile inline-block">
                                <?php if ($d == 1): ?>
                                    <div id="doctors-heading">
                                        <h1>Medical Practitioners</h1>
                                    </div>
                                <?php endif; ?>
                                <div class="mini-profile-inner">
                                    <div class="row-1st">
                                        <div class="inline-block">
                                            <div class="photo">
                                                <a href="/<?php echo $doctor->getUser()->getSlug() ?>">
                                                    <?php include_partial("doctor_show/potrait", array("doctor" => $doctor, "height" => 96)) ?>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="inline-block">
                                            <div class="info">
                                                <a href="/<?php echo $doctor->getUser()->getSlug() ?>" class="name-title">
                                                    <?php echo $doctor->getUser() ?>
                                                </a>
                                                <div class="rating" id="doctor-rating-<?php echo $doctor->getId() ?>">
                                                    <?php include_partial("rating", array("doctor" => $doctor, "doctorAverageRating" => $doctor->getAverageRating())) ?>
                                                </div>
                                                <div class="location-details">
                                                    <?php $contact = $doctor->getUser()->getContact() ?>
                                                    <div class="street-address"><?php echo $contact->getStreetAddress() ?></div>
                                                    <div class="area"><?php echo $contact->getArea() ?></div>
                                                    <div class="post-code"><?php echo $contact->getPostCode() ?></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="inline-block">
                                            <div class="accept-insurance"></div>
                                        </div>
                                    </div>
                                    <div class="row-2nd">
                                        <button class="button book-now" doctorid="<?php echo $doctor->getId() ?>" type="submit">Book now</button>
                                        <button class="button tell-a-friend" doctorid="<?php echo $doctor->getId() ?>" type="submit">Tell a friend</button>
                                    </div>
                                </div>
                            </div>
                            <div class="inline-block time-slot">
                                <?php include_partial("time_slots", array("doctor" => $doctor, "showHeadings" => $d == 1)) ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ol>
<div style="display: none;">
    <div id="book-now-box"></div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        
        var $sliderContainer = $('.time-slot-inner-slider').cycle({
            fx:     'scrollHorz',
            timeout: 0,
            next:   '#next-week',
            prev: '#prev-week'
        });
        
        $('#this-week').click(function(){
            $sliderContainer.cycle(0);
        });
        
        $('.book-now').click(function(){
            // automatically load the book now time slots
            $("#book-now-box").load('/appointment-book-now/' + $(this).attr("doctorid"));
        });
        
        $(".book-now").colorbox({inline:true, width:"688px", height:"540px", href:"#book-now-box", "close":closeHtml}); 
    });
</script>